import React from 'react'
import { Menu,Row,Col} from 'antd'
import style from '../styles/components/header.module.css'
import {DesktopOutlined,HomeOutlined,TeamOutlined} from '@ant-design/icons'
import Router from 'next/router'

const Header = ()=>{

    const handleClick=(e)=>{
         
        if(e.key==='home'){
            Router.push('/')
        }
        if(e.key==='list'){
            Router.push('/list')
        }
    }

    return(
        <div className={style.container}>
            <Row type='flex' justify="center">
                <Col xs={24} sm={24} md={10} lg={10} xl={10}>
                    <span className={style.logo}>小小姜</span>
                    <span className={style.text}>小小姜的技术博客</span>
                </Col>

                <Col xs={0} sm={0} md={16} lg={8} xl={6} className={style.Menu_container}>
                    <Menu mode="horizontal" onClick={handleClick} >
                        <Menu.Item key="home">
                           <HomeOutlined />
                            <span className={style.Menu_span}>首页</span>
                        </Menu.Item>
                        <Menu.Item key="list">
                            <DesktopOutlined/>
                            <span className={style.Menu_span}>笔记</span>
                        </Menu.Item>
                        <Menu.Item key="life">
                            <TeamOutlined/>
                            <span className={style.Menu_span}>生活</span>
                        </Menu.Item>
                    </Menu>
                </Col>
            </Row>
        </div>
    )
}

export default Header;